<!doctype html>
<html lang="zh-cn" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>我要投资-散标</title>
    <link th:replace="includeJs::includeJs">
    <link th:replace="includeJs::layui_js">
    <style>
        .title{
            margin-left: 15px;
            margin-right: 20px;
            font-size: 18px;
            color: #333;
            cursor: pointer;
        }
        .title:hover{
            color: #32b7ff;
        }
        th{
            background-color: #f8f8f8!important;
        }
        hr{
            margin: 0px;
        }
        .reload {
            cursor: pointer;
        }
        .layui-table,.layui-table-view{
            margin:0 !important;
        }

        .my-progress{
            margin-top: 25px;
        }
        .layui-progress-text {
            position: relative;
            top: -30px!important;
            line-height: 18px;
            font-size: 12px;
            color: #666;
        }
        .layui-table tr{
            height: 60px !important;
            transition: all .3s;
            -webkit-transition: all .3s;
        }

    </style>
</head>
<body>
<link th:replace="includeJs::dingding_header">
<link th:replace="includeJs::dingding_nav">

<div class="shaixuan">
    <div class="shaixuan_t">
        <a th:href="@{/specimens/toMytz}" class="title">放心投</a>
        <a class="title" style="font-size:20px; color: #32b7ff">散标</a>
    </div>
    <div style="background-color: #eee;
                padding: 30px;">
        <div style="width: 1100px; min-height: 450px; margin: 0 auto; background-color: white">
            <div style="padding: 20px; font-size: 16px;color: #333">散标列表</div>
            <hr>
            <div style="padding: 10px 20px; font-size: 14px; background-color: #fffae9; color: #FF9800">温馨提醒：网贷有风险，出借需谨慎！</div>
            <hr>
            <table id="looseBid" class="layui-table" lay-skin="row" lay-size="lg" style="margin: 0px">
                <!--<thead>
                    <tr>
                        <th>年利率</th>
                        <th>借款标题</th>
                        <th>期限</th>
                        <th>金额</th>
                        <th>进度</th>
                        <th><i class="layui-icon layui-icon-refresh-3"></i>刷新</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><san class="li-lv">10.80%</san></td>
                        <td><a href="#">NO.10108195</a></td>
                        <td>36个月</td>
                        <td>81,050元</td>
                        <td>
                            70%
                            <div class="layui-progress">
                                <div class="layui-progress-bar" lay-percent="70%" style="width: 70%;"></div>
                            </div>
                        </td>
                        <td>还款中</td>
                    </tr>
                </tbody>-->
            </table>
        </div>
    </div>
</div>
<div class="footer">
    <div class="footer_m">
        <div class="footer_l">使用条款 | 隐私保护</div>
        <div class="footer_r">© 2020 （赣州）叮叮金融信息服务有限公司    备案号 赣ICP备12025643号-1</div>
    </div>
</div>
<script>
    var tableIns;
    layui.use('table', function(){
        var table = layui.table;
        //第一个实例
        tableIns = table.render({
            elem: '#looseBid'
            ,url: '/getLooseBidData' //数据接口
            ,skin: 'row'
            ,size: 'lg'
            ,cols: [ [ //表头
                    {field: 'title', title: '借款标题', unresize: true, style: 'font-size: 16px',templet: function (d) {
                        return '<a target="_blank" href="/looseBidInfo/'+d.title+'">NO.'+d.title+'</a>';
                    }}
                    ,{field: 'apr', title: '年利率', width:180, unresize: true, style: 'color: #FF5722; font-size: 20px;'}
                    ,{field: 'timeLimit', title: '期限', width: 160, unresize: true}
                    ,{field: 'money', title: '总金额', width: 160, unresize: true}
                    ,{field: 'progress', title: '进度', width: 140, unresize: true, templet: function(d){
                        var result = '<div class="layui-progress my-progress" lay-showpercent="true">' +
                                        '   <div class="layui-progress-bar ';
                        if (d.progress == 100) {
                            result += 'layui-bg-red" lay-percent="'+d.progress+'%"></div>' +
                                '</div>'
                        }else if (d.progress >= 90) {
                            result += 'layui-bg-orange" lay-percent="'+d.progress+'%"></div>' +
                                '</div>'
                        }else {
                            result += 'layui-bg-blue" lay-percent="'+d.progress+'%"></div>' +
                                '</div>'
                        }
                        return  result;
                    }}
                    ,{field: 'status', title: '<span class="reload" onclick="window.location.reload()"><i class="layui-icon layui-icon-refresh-3"></i>刷新</span>', width: 140, unresize: true, style: "color:#999", align: 'center' ,templet:function (d) {
                        if (d.progress == 100) {
                            return '已满标'
                        }
                        if (d.status == 1) {
                            return '<a target="_blank" href="/looseBidInfo/'+d.title+'" type="button" class="layui-btn layui-btn-sm layui-btn-danger">授权出借</a>';
                        }else if (d.status == 2) {
                            return '已满标'
                        }
                    }}
                ]
            ]
            ,done:function () {
                layui.use('element', function(){
                    var element = layui.element;
                });
            }
        });

    });
</script>
</body>
</html>